<template>
  <div class="Pet">
    <div class="banner">
      <img src="@/assets/images/product/bg2.jpg" alt="" />
    </div>
    <!-- 狗狗收养中心 -->
    <div class="adoption">
      <div class="header">
        <img src="@/assets/images/pet/zhua_red.png" alt="" />
        <div class="tip">遇见完美的动物</div>
        <div class="title">可爱的小猫小狗等待被收养</div>
        <div class="scription">
          最好的整体猫狗DNA测试是“登船繁殖与健康工具包”它为您提供了大多数宠物品种的品种和信息
        </div>
      </div>
      <div class="container">
        <div class="item" v-for="item in petList" :key="item.id">
          <div class="pet-bg">
            <img :src="'http://localhost:3000/' + item.avatar" alt="" />
          </div>
          <div class="message">
            <div class="name">{{ item.name }}</div>
            <div class="birth">
              <span
                ><i
                  class="iconfont icon-shezhixitongshezhigongnengshezhishuxing"
                ></i
                >{{ item.cultivar }}</span
              >
              <span
                ><i class="iconfont icon-rili"></i>出生 :
                {{ new Date().getFullYear() - item.age }}</span
              >
            </div>
            <div class="start-price">
              <span class="start">
                <i
                  class="iconfont icon-shoucang1"
                  :class="item.start >= 1 ? 'active' : ''"
                ></i>
                <i
                  class="iconfont icon-shoucang1"
                  :class="item.start >= 2 ? 'active' : ''"
                ></i>
                <i
                  class="iconfont icon-shoucang1"
                  :class="item.start >= 3 ? 'active' : ''"
                ></i>
                <i
                  class="iconfont icon-shoucang1"
                  :class="item.start >= 4 ? 'active' : ''"
                ></i>
                <i
                  class="iconfont icon-shoucang1"
                  :class="item.start >= 5 ? 'active' : ''"
                ></i>
              </span>
              <span class="price"
                >总价 :
                <span>{{
                  item.price == 0 ? "免费" : Number(item.price).toFixed(2)
                }}</span></span
              >
            </div>
          </div>
          <div class="button" @click="$router.push(`/pet/${item.id}`)">
            <span>
              <span>收养宠物</span>
              <img src="@/assets/images/pet/zhua.png" alt="" />
            </span>
            <div class="bg"></div>
          </div>
        </div>

        <div class="notice">
          <div>
            <div class="tip">我是铲屎官</div>
            <div class="title">这是最受欢迎的宠物</div>
            <div class="scription">
              最好的整体猫狗DNA测试是“登船繁殖与健康工具包”它为您提供了大多数宠物品种的品种和信息
            </div>
            <div class="botton">
              <span>更多宠物</span
              ><img src="@/assets/images/pet/zhua_red.png" alt="" />
              <div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAxiosPetList } from "@/api";
export default {
  name: "myPet",
  data() {
    return {
      petList: [],
    };
  },
  mounted() {
    this.getPetList();
  },
  methods: {
    // 获取宠物列表
    async getPetList() {
      let result = await getAxiosPetList();
      this.petList = result.result;
    },
  },
};
</script>

<style lang="less" scoped>
.Pet {
  background: url("~@/assets/images/pet/adoption_shop_bg.jpg");
  background-size: 90%;
  background-position: center;
  .banner {
    img {
      width: 100%;
    }
  }
  .adoption {
    width: 1200px;
    margin: 0 auto;
    padding-top: 80px;
    .header {
      text-align: center;
      width: 400px;
      margin: 0 auto;
      // background-color: #ccc;
      .tip {
        font-size: 16px;
        padding: 14px 0;
        letter-spacing: 2px;
        color: #f04336;
        font-weight: bold;
      }
      .title {
        font-size: 32px;
        font-weight: bold;
        letter-spacing: 1px;
        color: #333;
      }
      .scription {
        font-size: 14px;
        letter-spacing: 2px;
        line-height: 24px;
        color: #676666;
        padding: 20px 0;
      }
    }
    .container {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 40px;
      justify-content: space-between;
      .item {
        flex-basis: 380px;
        margin-top: 40px;
        position: relative;
        &:hover .button {
          opacity: 1;
          top: 35%;
        }
        &:hover .pet-bg {
          opacity: 0.8;
        }

        .pet-bg {
          width: 380px;
          height: 380px;
          transition: all 0.4s;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .message {
          position: relative;
          width: 90%;
          background-color: #fff;
          margin: 0 auto;
          box-sizing: border-box;
          padding: 20px;
          border-radius: 10px;
          margin-top: -60px;
          box-shadow: 0px 9px 34.3px 0.7px rgb(0 0 0 / 5%);
          .name {
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 2px;
            text-align: center;
            // padding-top: 4px;
            color: #f04336;
          }
          .birth {
            padding: 16px 0;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #ddd;
            span {
              font-size: 14px;
              color: #676666;
              line-height: 16px;
              i {
                font-weight: normal;
                padding-right: 4px;
              }
            }
          }
          .start-price {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            padding: 20px 0 10px 0;
            .start {
              i {
                font-size: 14px;
                padding-right: 4px;
                color: #999;
                &.active {
                  color: #f39c10;
                }
              }
            }
            .price {
              font-weight: bold;
              color: #676666;
              span {
                color: #0a303a;
              }
            }
          }
        }
        .button {
          position: absolute;
          width: 180px;
          height: 60px;
          background-color: #f04336;
          border-radius: 4px;
          opacity: 0;
          // opacity: 1;
          top: 27%;
          // top: 35%;
          left: 50%;
          transition: all 0.4s;
          transform: translateX(-50%);
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          cursor: pointer;
          > span {
            position: relative;
            text-decoration: none;
            z-index: 9;
            display: block;
            > span {
              color: #fff;
              font-size: 18px;
              font-weight: bold;
              letter-spacing: 2px;
            }
          }
          img {
            margin-left: 10px;
            color: #fff;
            width: 20px;
            height: 20px;
          }
          &:hover .bg {
            top: -15px;
          }
          .bg {
            position: absolute;
            width: 280px;
            height: 90px;
            background-color: #0a303a;
            top: 70px;
            border-radius: 50%;
            transition: all 0.4s;
          }
        }
      }

      .notice {
        // padding-top: 40px;
        // margin-left: 40px;
        // box-sizing: border-box;
        flex-basis: 380px;
        margin-top: 40px;
        > div {
          width: 380px;
          border-radius: 4px;
          height: 100%;
          background: url("~@/assets/images/pet/breed_services_bg.jpg");
          background-position: center;
          background-size: cover;
          padding: 44px;
          box-sizing: border-box;
          color: #fff;
          .tip {
            font-size: 18px;
            // letter-spacing: 2px;
          }
          .title {
            font-size: 36px;
            padding: 20px 0;
            line-height: 44px;
            letter-spacing: 4px;
          }
          .scription {
            font-size: 18px;
            line-height: 30px;
            opacity: 0.95;
            padding: 10px 0;
          }
          .botton {
            cursor: pointer;
            width: 160px;
            height: 60px;
            border-radius: 4px;
            display: flex;
            background-color: #fff;
            align-items: center;
            justify-content: center;
            margin-top: 60px;
            position: relative;
            overflow: hidden;
            span {
              color: #f04235;
              font-size: 20px;
              padding-right: 10px;
              position: relative;
              z-index: 9;
              font-weight: bold;
              transition: all 0.4s;
            }
            img {
              height: 20px;
              position: relative;
              z-index: 9;
              margin-top: 2px;
            }
            &:hover > div {
              top: -20px;
            }
            &:hover > span {
              color: #fff;
            }
            > div {
              transition: all 0.4s;
              position: absolute;
              width: 200px;
              height: 100px;
              top: 70px;
              // top: -20px;
              background-color: #000;
              border-radius: 50%;
            }
          }
        }
      }
    }
  }
}
</style>